<template>
  <a-form :rules="filesRules" :model="filesForm" @finish="submit" :label-col="{ span: 6 }" :wrapper-col="{ offset: 1 }"
    label-align="right" :disabled="hasPerm('ax:files:edit')">
    <FormCard title="编辑/新增" :back="back" subtitle="文件管理">
      <a-row :gutter="8">
        <a-col :span="16">
          <a-tabs>
            <!-- 单文件上传 -->
            <a-tab-pane key="single" tab="单文件">
              <a-form-item label="文件名称" name="fileName">
                <a-input allow-clear placeholder="请输入文件名称" v-model:value="filesForm.fileName"></a-input>
              </a-form-item>

              <a-form-item label="文件大小）" name="fileSize">
                <a-input allow-clear disabled v-model:value="filesForm.fileSize"></a-input>
              </a-form-item>
              <a-form-item label="文件类型" name="fileType">
                <a-select v-model:value="filesForm.fileType" :options="fileTypeOptions"></a-select>
              </a-form-item>
              <a-form-item label="文件描述" name="fileDescription">
                <a-input allow-clear placeholder="请输入文件描述" v-model:value="filesForm.fileDescription"></a-input>
              </a-form-item>
              <a-form-item label="文件存储路径" name="filePath" >
                <!-- 使用 v-model:file-list 可获取已经上传成功的文件列表 -->
                <div class="flex gap-4">
                  <div class="flex-1" :key="filesForm.fileId">
                    <FileUpload :max-count="1" name="file" @change="setFiles">
                      <a-empty v-if="!filesForm.filePath" description="请上传文件" />
                      <a-image class="h-[100%]" :style="{ maxHeight: '300px' }" :preview="false"
                        :src="filesForm.filePath" v-else-if="filesForm.fileType === 'IMAGE'"></a-image>
                      <FileRender v-else type="file" :filename="filesForm.fileName" />
                    </FileUpload>
                  </div>
                </div>
              </a-form-item>
              <a-row justify="end">
                <a-col :offset="7">
                  <a-button size="middle" htmlType="submit" type="primary" :loading="filesTable.loading" block>
                    保存
                  </a-button>
                </a-col>
              </a-row>
            </a-tab-pane>
            <!-- 多文件上传 -->
            <a-tab-pane key="multiple" tab="多文件上传">
              <a-form-item>
                <div class="flex justify-between items-center">
                  <h3>批量上传文件</h3>
                  <a-button @click="upload" type="primary" size="middle" :disabled="formList.length === 0"
                    :loading="filesTable.loading">
                    批量上传
                  </a-button>
                </div>
                <a-form-item label="文件类型" name="fileType" class="mt-8">
                  <a-radio-group v-model:value="fileType" :options="fileTypeOptions"></a-radio-group>
                </a-form-item>
                <div class="text-gray-500 mt-8">采用直传方式，先传文件后传参数</div>
                <a-divider></a-divider>
                <FileUpload class="my-12 h-[120px]" @change="setMultipleFiles"></FileUpload>
              </a-form-item>
            </a-tab-pane>
          </a-tabs>
        </a-col>

      </a-row>
    </FormCard>
  </a-form>
</template>

<script setup lang="ts">
import { batchAddition, createFiles, updateFiles } from '@/api/modules/ax/files/files';
import type { AxFiles } from '@/api/modules/ax/files/types';
import type { UploadResponse } from '@/types/system';
import { bytesToSize } from '@/utils/common/format';
import { hasPerm } from '@/utils/common/perm';
import { getFileType } from '@/utils/file/is.file';
import { response } from '@/utils/table/table';
import FileRender from '@/views/components/file-render/FileRender.vue';
import { filesList } from '../data/curd';
import { filesForm, filesResetForm, filesRules, filesShowForm } from '../data/form';
import { fileTypeOptions } from '../data/options';
import { filesTable } from '../data/table';

const fileType = ref('');
const formList = ref<Partial<AxFiles>[]>([]);

const submit = async () => {
  filesTable.value.loading = true;
  if (filesForm.value.fileId) {
    await response(updateFiles, filesForm.value);
  } else {
    await response(createFiles, filesForm.value);
  }
  filesTable.value.loading = false;
  await filesList();
  back();
};

const setMultipleFiles = (response: UploadResponse) => {
  formList.value.push({
    fileName: response.originalFilename,
    filePath: response.url,
    fileSize: bytesToSize(response.size || 0),
    fileType: fileType.value,
    fileDescription: '',
    fileStorageLocation: response.fileName,
    externalLink: response.url,
  });
};

const upload = async () => {
  await response(batchAddition, formList.value);
  back();
};
const back = () => {
  filesResetForm();
  filesShowForm.value = false;
  filesList();
};

const setFiles = (record: UploadResponse) => {
  filesForm.value.fileName = record.originalFilename;
  filesForm.value.fileSize = bytesToSize(record.size);
  filesForm.value.fileStorageLocation = record.fileName;
  filesForm.value.filePath = record.url;
  filesForm.value.fileType = getFileType(record.fileName);
};
</script>

<style lang="scss" scoped></style>
